<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- src引入vue.js文件 -->
    <script src="../libs/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>vue入门学习</h2>
        <!-- 这里是响应式的，改变数据dom也会跟着改变 -->
        <!-- vm.msg = "" 引号写啥就会跟着改变-->
        <h3 class="title">{{msg }}</h3>
        <!-- 给标签绑定属性 -->
        <h4 v-bind:data-msg="msg" data-word="word" v-bind:data-text="text">{{word}}</h4>
        <h4>{{text}}</h4>
        <!-- 不用v-bind则是静态属性，无法显示，需要加上 -->
        <button v-on:click = "changeFlag">按钮</button>
        <div v-if="flag">
            <img v-bind:src="src" alt="">
        </div>


        <input type="text" v-model="msg">
        <div>{{msg}}</div>

        <h2 v-text="text"></h2>
        <h2 v-html="html"></h2>
        
    </div>
    <script>
        console.log(Vue);
        // vm实例化对象，Vue是构造函数，必须实例化Vue
        const vm = new Vue({
            // el属性,指明Vue实现的dom范围，只会在#app中生效
            el:"#app",
            // data定义数据，vue通过数据来操作dom
            data:{
                msg:"yjc",
                word:"允许采用简洁的模板语法来声明式地将数据渲染进Dom系统",
                text:"vue666",
                html:"<h2>HTML标签</h2>",
                // 图片路径
                src:"https://img1.baidu.com/it/u=724179003,4096104503&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1665334800&t=fe01ec8edebd5cbab079544fbedc5a1c",
                // 超链接路径也是如此
                link:"",
                flag:false
            },
            methods:{
                changeFlag(){
                    this.flag = !this.flag //this指向vm对象
                }
            }
        })
        console.log(vm);
    </script>
</body>
</html>